<div ui-view="form"></div>
<div class="tab-pane" id="organizations">
    <div ng-cloak id="htmlTemplate" class="card at-Panel">
        <div class="List-header">
            <div class="List-title">
                <div class="List-titleText" translate>
                    ORGANIZATIONS
                </div>
                <span class="badge List-titleBadge">
                    {{ orgCount }}
                </span>
            </div>

        </div>

        <div class="List-well">
            <div class="List-actionHolder">
                <div class="List-actions">
                    <button class="at-Button--add"
                        aria-label="{{'Add a new organization'|translate}}"
                        id="button-add"
                        aw-tool-tip="{{'Create a new organization'|translate}}"
                        ng-show="canAdd"
                        ng-click="addOrganization()">
                    </button>
                </div>
            </div>
            <smart-search
                django-model="organizations"
                base-path="organizations"
                iterator="organization"
                list="list"
                dataset="organization_dataset"
                collection="organizations"
                search-tags="searchTags">
            </smart-search>

            <div class="List-noItems" ng-show="organizations.length < 1" translate>PLEASE ADD ITEMS TO THIS LIST</div>

            <div class="OrgCards" id="OrgCards">
                <div class="OrgCards-card"
                    ng-class="{'OrgCards-card--selected': $stateParams.organization_id == card.id}"
                    ng-repeat="card in orgCards track by card.id">
                    <div class="OrgCards-header">
                        <h3 class="OrgCards-label"
                            aw-tool-tip="{{ (card.description || '') | sanitize }}"
                            aw-tip-placement="top">
                            <a ui-sref="organizations.edit({organization_id:card.id})">
                                {{ card.name }}
                            </a>
                        </h3>
                        <div class="OrgCards-actionItems">
                            <button class="OrgCards-actionItem
                                List-actionButton"
                                aria-label="{{'Edit Organization'|translate}}"
                                ng-show="card.user_capabilities.edit"
                                ng-class="{'List-editButton--selected': $stateParams.organization_id == card.id}"
                                ng-click="editOrganization(card.id)">
                                <i class="OrgCards-actionItemIcon fa fa-pencil">
                                </i>
                            </button>
                            <button class="OrgCards-actionItem
                                List-actionButton"
                                aria-label="{{'View Organization'|translate}}"
                                ng-show="!card.user_capabilities.edit"
                                ng-class="{'List-editButton--selected': $stateParams.organization_id == card.id}"
                                ng-click="editOrganization(card.id)">
                                <i class="OrgCards-actionItemIcon fa fa-search-plus">
                                </i>
                            </button>
                            <button class="OrgCards-actionItem List-actionButton
                                List-actionButton--delete"
                                aria-label="{{'Delete Organization'|translate}}"
                                ng-show="card.user_capabilities.delete"
                                ng-click="deleteOrganization(card.id, card.name)">
                                <i class="OrgCards-actionItemIcon
                                    fa fa-trash-o">
                                </i>
                            </button>
                        </div>
                    </div>
                    <div class="OrgCards-links">
                        <div class="OrgCards-link" ng-repeat="link in card.links">
                            <span class="badge List-titleBadge
                                OrgCards-linkBadge"
                                ng-class="{'List-titleBadge--selected': $state.matches(link.activeMode) && $stateParams.organization_id == card.id}">
                                {{ link.count }}
                            </span>
                            <a class="OrgCards-linkName"
                                ui-sref="{{ link.sref }}"
                                ui-sref-opts="{{ link.srefOpts }}">
                                {{ link.name }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <paginate
                    base-path="organizations"
                    iterator="organization"
                    dataset="organization_dataset"
                    collection="organizations">
            </paginate>
        </div>
    </div>
</div>
